<template>
  <div class="content-container">
    <single-site-tree @furn="sitetreeshow=!sitetreeshow" ref="tree" :parent-allow-click="false"/>
    <div class="ml-tree" :class="sitetreeshow?'mainPadding':'hide'">
      <div class="baseInfo">
        <div class="enterpriseInfo">
          <div class="name">
            <div class="img po_left"></div>
            <div class="f_lh2">
              <div class="font_color_base f_nowrap">企业名称</div>
              <div class="fw f_nowrap">山东向明环保</div>
            </div>
          </div>
          <div class="status f_lh2">
            <div class="font_color_base f_nowrap">状态</div>
            <div class="fw status_good f_nowrap">正常</div>
          </div>
        </div>
        <div class="siteInfo">
          <div class="name">
            <div class="img po_left"></div>
            <div class="f_lh2">
              <div class="font_color_base f_nowrap">站点名称</div>
              <div class="fw f_nowrap">测试点1</div>
            </div>
          </div>
          <div class="status f_lh2">
            <div class="font_color_base f_nowrap">状态</div>
            <div class="fw status_good f_nowrap">正常</div>
          </div>
        </div>
        <div class="industryInfo">
          <div class="name">
            <div class="img po_left"></div>
            <div class="f_lh2">
              <div class="font_color_base f_nowrap">所属行业</div>
              <div class="fw f_nowrap">制造业</div>
            </div>
          </div>
        </div>
        <div class="addressInfo">
          <div class="name">
            <div class="img po_left"></div>
            <div class="f_lh2">
              <div class="font_color_base f_nowrap">地址</div>
              <div class="fw f_nowrap">山东向明环保</div>
            </div>
          </div>
        </div>
      </div>
      <div class="samplingTime">
        <div></div>
        <span>采样时间</span>
        <span>2020-08-23</span>
        <span>18:00</span>
      </div>
      <div class="samplingInfo">
        <div v-for="(item,i) in gatherProject" :key="i" class="items">
          <div class="mb10">
            <span class="mr10 fw">{{ item.label }}</span>
            <span class="font_color_base">{{ item.unit }}</span>
          </div>
          <div>
            <span class="fw f28" :style="{color:item.fontColor}">{{ item.value }}</span>
            <span v-if="item.baseData">{{ '/' + item.baseData }}</span>
          </div>
        </div>
      </div>
      <div class="samplingDevice">
        <div class="itemDevice">
          <div class="deviceBg"></div>
          <div class="deviceText">
            <div class="fw">COD设备</div>
            <div class="font_color_blue">正常测量</div>
          </div>
        </div>
        <div class="itemDevice">
          <div class="deviceBg"></div>
          <div class="deviceText">
            <div class="fw">氨氮设备</div>
            <div class="font_color_blue">空闲</div>
          </div>
        </div>
        <div class="deviceStatus">
          <div class="item">
            <div class="deviceBg"></div>
            <div class="deviceText">
              <div class="fw">雨水排口</div>
              <div class="font_color_red">开启</div>
            </div>
          </div>
          <div class="item">
            <div class="deviceBg"></div>
            <div class="deviceText">
              <div class="fw">污水排口</div>
              <div class="font_color_blue">关闭</div>
            </div>
          </div>
          <div class="item">
            <div class="deviceBg"></div>
            <div class="deviceText">
              <div class="fw">系统模式</div>
              <div class="font_color_blue">手动</div>
            </div>
          </div>
        </div>
      </div>
      <div class="tabsBox">
        <div class="tabs">
          <div class="tabItem fw" :class="{active:item.value==tabsIndex}" v-for="item in tabList" :key="item.value"
               @click="tabToggle(item.value)"
          >
            {{ item.label }}
          </div>
        </div>
        <div class="tabsContent">
          <real-time-data v-if="tabsIndex=='1'"/>
          <discharge-details v-else-if="tabsIndex=='2'"/>
          <video-monitoring v-else-if="tabsIndex=='3'"/>
          <long-control v-else-if="tabsIndex=='4'"/>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import SingleSiteTree from '@/components/zhhbTree/SingleSiteTree'
import DischargeDetails from '@/views/onlineMonitor/details/components/DischargeDetails'
import LongControl from '@/views/onlineMonitor/details/components/LongControl'
import RealTimeData from '@/views/onlineMonitor/details/components/RealTimeData'
import VideoMonitoring from '@/views/onlineMonitor/details/components/VideoMonitoring'

export default {
  name: 'Index',
  components: {
    SingleSiteTree,
    DischargeDetails,
    LongControl,
    RealTimeData,
    VideoMonitoring
  },
  data() {
    return {
      sitetreeshow: true,
      tabsIndex: '1',
      gatherProject: [
        { label: 'COD', unit: '(mg/l)', fontColor: '#1D6AD1', baseData: '50', value: '43.5' },
        { label: '氨氮', unit: '(mg/l)', fontColor: '#C93939', baseData: '5', value: '6' },
        { label: 'PH', unit: '(mg/l)', fontColor: '#1D6AD1', baseData: '0.5', value: '7.1' },
        { label: '液位', unit: '(mg/l)', fontColor: '#C93939', baseData: '0.5(1)', value: '0.8' },
        { label: '降水量', unit: '(mg/l)', fontColor: '#1D6AD1', baseData: '', value: '43.5' },
        { label: '瞬时流速', unit: '(mg/l)', fontColor: '#1D6AD1', baseData: '', value: '1245.12' },
        { label: '累计流量', unit: '(mg/l)', fontColor: '#1D6AD1', baseData: '', value: '548761' }
      ],
      tabList: [
        { label: '实时数据', value: '1' },
        { label: '排放情况', value: '2' },
        { label: '视频监控', value: '3' },
        { label: '远程控制', value: '4' }
      ]

    }
  },
  methods: {
    tabToggle(index) {
      this.tabsIndex = index
    }
  }
}
</script>

<style lang="scss" scoped>
.content-container {
  width: 100%;
  height: 100%;

  .baseInfo {
    width: 100%;
    background-color: #FFFFFF;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    overflow: auto;

    .enterpriseInfo {
      display: flex;
      border-right: 3px solid #A6A6A6;
      padding: 0 30px;
      width: 350px;

      .name {
        width: 150px;
        display: flex;
        justify-content: space-between;
        position: relative;
        padding-left: 50px;
        margin-right: 20px;

        .img {
          width: 40px;
          height: 40px;
          background-color: #409EFF;
          margin-right: 5px;
          border-radius: 6px;
        }
      }

      .status {
        flex: 1;
        text-align: center;

        .status_good {
          &::before {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #1ab394;
            margin-right: 5px;
            position: relative;
            top: 4px;
          }
        }
      }
    }

    .siteInfo {
      display: flex;
      border-right: 3px solid #A6A6A6;
      padding: 0 30px;
      width: 350px;

      .name {
        width: 150px;
        display: flex;
        justify-content: space-between;
        position: relative;
        padding-left: 50px;
        margin-right: 20px;

        .img {
          width: 40px;
          height: 40px;
          background-color: #409EFF;
          margin-right: 5px;
          border-radius: 6px;
        }
      }

      .status {
        flex: 1;
        text-align: center;

        .status_good {
          &::before {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #1ab394;
            margin-right: 5px;
            position: relative;
            top: 4px;
          }
        }
      }
    }

    .industryInfo {
      display: flex;
      border-right: 3px solid #A6A6A6;
      padding: 0 30px;
      width: 260px;

      .name {
        width: 150px;
        display: flex;
        justify-content: space-between;
        position: relative;
        padding-left: 50px;
        margin-right: 20px;

        .img {
          width: 40px;
          height: 40px;
          background-color: #409EFF;
          margin-right: 5px;
          border-radius: 6px;
        }
      }

      .status {
        flex: 1;
        text-align: center;

        .status_good {
          &::before {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #1ab394;
            margin-right: 5px;
            position: relative;
            top: 4px;
          }
        }
      }
    }

    .addressInfo {
      display: flex;
      padding: 0 30px;
      //width: 350px;
      .name {
        width: 150px;
        display: flex;
        justify-content: space-between;
        position: relative;
        padding-left: 50px;
        margin-right: 20px;

        .img {
          width: 40px;
          height: 40px;
          background-color: #409EFF;
          margin-right: 5px;
          border-radius: 6px;
        }
      }

      .status {
        flex: 1;
        text-align: center;

        .status_good {
          &::before {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #1ab394;
            margin-right: 5px;
            position: relative;
            top: 4px;
          }
        }
      }
    }
  }

  .samplingTime {
    margin: 20px 0;

    div {
      display: inline-block;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      margin-right: 5px;
      background-color: #1ab394;
      position: relative;
      top: 8px;
    }

    span {
      margin-right: 20px;
    }

  }

  .samplingInfo {
    width: 100%;
    height: 122px;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;

    .items {
      padding: 30px;
      margin-right: 20px;
      border-radius: 10px;
      background-color: #FFFFFF;
    }
  }

  .samplingDevice {
    width: 100%;
    overflow: auto;
    height: 120px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 20px 0;

    .itemDevice {
      padding: 10px 40px 10px 20px;
      border-radius: 10px;
      margin-right: 20px;
      background-color: #FFFFFF;
      display: flex;
      justify-content: space-between;

      .deviceBg {
        width: 80px;
        height: 100%;
        background-color: #EEF2F5;
        margin-right: 30px;
      }

      .deviceText {
        text-align: center;
        line-height: 3;
      }
    }

    .deviceStatus {
      display: flex;
      justify-content: flex-start;
      background-color: #FFFFFF;
      padding: 10px;
      display: flex;
      justify-content: flex-start;

      .item {
        display: flex;
        padding-right: 20px;

        .deviceBg {
          width: 80px;
          height: 100%;
          background-color: #EEF2F5;
          margin-right: 30px;
        }

        .deviceText {
          text-align: center;
          line-height: 3;
        }
      }

    }
  }

  .tabsBox {
    width: 100%;

    .tabs {
      display: flex;
      justify-content: flex-start;
      margin-bottom: 20px;
      .tabItem {
        margin-right: 20px;
        padding: 5px 10px;
        border-radius: 20px;
        cursor: pointer;
      }

      .active {
        color: #FFFFFF;
        background-color: #3C86EF;
      }
    }
  }
}
</style>
